<template>
  <div id="share">
    <el-form status-icon  ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label=" 视频标题" >
        <el-input placeholder="请输入内容" v-model="uploadinfo.title" ></el-input>
      </el-form-item>
      <el-form-item>视频封面
        <el-upload class="avatar-uploader" :action="actionimgurl" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :headers="header"
          :with-credentials="true">
          <img v-if="uploadinfo.url" :src="uploadinfo.url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        视频
        <el-upload class="upload-demo" ref="upload" :action="actionviewurl" :on-preview="handlePreview"
          :on-remove="handleRemove" :file-list="fileList" :auto-upload="false" :headers="header"
          :with-credentials="true" :on-success="viewuploadSuccess">

          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传视频</el-button>

        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="success" plain @click="uploadInfo()">上传</el-button>
      </el-form-item>
    </el-form>

















  </div>
</template>

<script>
  export default {
    data() {
      return {
        fileList: [],
        uploadinfo: {


          url: '',
          viewaddr: '',
          title: '',


        },

        actionimgurl: 'http://localhost:9856/nono/upload/image',
        actionviewurl: 'http://localhost:9856/nono/upload/view',


        header: {
          "Authorization": `Bearer${window.localStorage.getItem("accessToken")}`,
          contentType : "application/json;charsetset=UTF-8",

        },

      };
    },
    methods: {
      async uploadInfo(){
        console.log(this.uploadinfo.title)
        if(this.uploadinfo.title==null||this.uploadinfo.title==""){
          return this.$message.error("请输入标题")
        }
       let result= await this.$http.post("/nono/upload/uploadInfo",this.uploadinfo,{
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          }
        })
        if(result.data.status==200){
          this.$message.success("上传成功")
        }else{
          return this.$message.error("服务器繁忙,请稍后重试")
        }
      },
      /* 验证登录,记录日志*/
      logs() {
        if (localStorage.getItem("accessToken") == null) {
          this.$message.error("请先登录")
          this.$router.flush("/login")
        }
        this.$http.get("/nono/upload/logs", {
          headers: {
            "Authorization": "Bearer " +
              localStorage.getItem("accessToken")
          }
        })
      },

      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleAvatarSuccess(res, file) {

        console.log(file)
        console.log(res)
        // this.url = URL.createObjectURL(file.raw);
        this.uploadinfo.url=res.data
      },
      viewuploadSuccess(res, file) {
        console.log(file)
        console.log(res)
        if (res.status != 200) {
          this.$message.error("抱歉,出现异常")
        }
        this.uploadinfo.viewaddr = res.data
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
    mounted() {
      this.logs()
    }
  }
</script>

<style>

  .demo-ruleForm {
    width: 500px;
    height: 50px;
    margin: auto;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
